import confetti from 'canvas-confetti'
// 'canvas-confetti'是一个JavaScript库，可以在网页上制造彩色纸屑的效果。这个库可以用于庆祝活动、节日等场合，让网页更加生动有趣。它基于HTML5 Canvas元素实现，可以自定义颜色、形状、数量等参数，非常灵活。

/*
 *  1
 * 制作烟花效果 好像并没有作用X 赢了的时候会出现烟花效果
 * @export
* */
export function fireworks() {
  const duration = 15 * 1000
  const animationEnd = Date.now() + duration
  const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }

  function randomInRange(min: number, max: number) {
    return Math.random() * (max - min) + min
  }

  const interval: NodeJS.Timer = setInterval(() => {
    const timeLeft = animationEnd - Date.now()

    if (timeLeft <= 0)
      return clearInterval(interval)

    const particleCount = 50 * (timeLeft / duration)
    // since particles fall down, start a bit higher than random
    confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }))
    confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }))
  }, 250)
}

export function schoolPride() {
  const end = Date.now() + (15 * 1000)
  window.console.log('schoolPride:学校骄傲？')
  // go Buckeyes!
  const colors = [
    '#ffa62d',
    '#ff5e7e',
    '#26ccff',
    '#a25afd',
    '#88ff5a',
    '#fcff42',
    '#ff36ff',
  ];

  (function frame() {
    confetti({
      particleCount: 2,
      angle: 60,
      spread: 55,
      origin: { x: 0 },
      colors,
    })
    confetti({
      particleCount: 2,
      angle: 120,
      spread: 55,
      origin: { x: 1 },
      colors,
    })

    if (Date.now() < end)
      requestAnimationFrame(frame)
  }())
}

export function basicCannon() {
  window.console.log('basicCannon:基础大炮？')
  confetti({
    particleCount: 100,
    spread: 100,
    origin: { y: 0.6 },
  })
}
